前言

本系列將介紹 Rails with Vue 的基本概念，並且以一個簡單的專案 Todo 來說明如何使用 Rails with Vue。我將透過這一系列的文章記錄我學習的過程，並且將我所學到的知識分享給大家。

• 【Day 01】淺入淺出 Rails with Vue - Before We Begin
• 【Day 02】淺入淺出 Rails with Vue - Vue 的基本概念 - 1
• 【Day 03】淺入淺出 Rails with Vue - Vue 的基本概念 - 2
• 【Day 04】淺入淺出 Rails with Vue - Vue 的基本概念 - 3
• 【Day 05】淺入淺出 Rails with Vue - Vue 的基本概念 - 4
• 【Day 06】淺入淺出 Rails with Vue - Vue 的基本概念 - 5
• 【Day 07】淺入淺出 Rails with Vue - Vue 的基本概念 - 6
• 【Day 08】淺入淺出 Rails with Vue - Vue 的基本概念 - 7
• 【Day 09】淺入淺出 Rails with Vue - Vue 的基本概念 - 8
• 【Day 10】淺入淺出 Rails with Vue - Vue 的基本概念 - 9
• 【Day 11】淺入淺出 Rails with Vue - Vue 的基本概念 - 10
• 【Day 12】淺入淺出 Rails with Vue - Vue 的基本概念 - 11
• 【Day 13】淺入淺出 Rails with Vue - Vue 的基本概念 - 12
• 【Day 14】淺入淺出 Rails with Vue - Vue 的基本概念 - 13
• 【Day 15】淺入淺出 Rails with Vue - Vue 的基本概念 - 14
• 【Day 16】淺入淺出 Rails with Vue - Vue 的基本概念 - 15

Form Input Bindings

Basic Usage

Checkbox

可以用 v-model 來綁定 checkbox 的值，如以下範例中的 checked，當使用者點擊 checkbox 時，checked 的值會跟著改變。

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

若有多個 checkboxes，可以綁定到同一個陣列，如以下範例中的 checkedNames，當使用者勾選 checkbox 時，會將 checkbox 的值加入到 checkedNames 陣列中。

<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>

new Vue({
  el: '...',
  data: {
    checkedNames: []
  }
})

Radio

可以用 v-model 來綁定 radio 的值，如以下範例中的 picked，當 radio 被選擇時，picked 的值會被更新。

<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>

Select

可以用 v-model 來綁定 select 的值，如以下範例中的 selected，當使用者選擇不同的選項時，selected 的值會跟著改變。

<select v-model="selected">
  <option disabled value="">Please select one</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

假如 v-model 的 initial value 沒有符合選項的值，<select> 元素將會以「未選擇」狀態呈現。在 iOS 中，這個行為會導致使用者無法選擇第一個選項。因此，我們推薦提供一個無效的預設值，
例如以上範例中使用空字串來避免這個問題。

multiple select 則是用 v-model 綁定到一個陣列，如以下範例中的 selected，當使用者選擇不同的選項時，selected 的值會跟著改變。

<select v-model="selected" multiple>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>

也可以使用 v-for 動態產生選項，如以下範例中使用 v-for 來產生 options 陣列中的選項，並將 selected 綁定到 options 陣列中的值。

<select v-model="selected">
  <option v-for="option in options" v-bind:value="option.value">
    {{ option.text }}
  </option>
</select>
<span>Selected: {{ selected }}</span>

new Vue({
  el: '...',
  data: {
    selected: 'A',
    options: [
      { text: 'One', value: 'A' },
      { text: 'Two', value: 'B' },
      { text: 'Three', value: 'C' }
    ]
  }
})

Value Bindings

對於 radio, checkbox, select options 來說，v-model 綁定的值通常都是 static string (字串)。

<!-- `picked` is a string "a" when checked -->
<input type="radio" v-model="picked" value="a">

<!-- `toggle` is either true or false -->
<input type="checkbox" v-model="toggle">

<!-- `selected` is a string "abc" when the first option is selected -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

但有時候我們可能想要綁定的值是 Vue instance 的 dynamic property (動態屬性)，這時候可以使用 v-bind 來綁定。

Checkbox

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// when checked:
vm.toggle === 'yes'
// when unchecked:
vm.toggle === 'no'

true-vale 和 false-value 不會影響 input 的 value，因為瀏覽器在 form submissions 時，只會將 checked 的 checkbox 的 value 提交。
如果為了保證兩個值中的一個被提交，可以使用 radio input 來代替。

Radio

如以下範例中當 radio 被選擇時，picked 的值會被更新為 a。

<input type="radio" v-model="pick" v-bind:value="a">

// when checked:
vm.pick === vm.a

Select Options

以下範例中我們將 options 的 value 綁定到一個 object，當使用者選擇不同的選項時，selected 的值會跟著改變。
也可以在瀏覽器 console 中觀察 selected 的值。

<select v-model="selected">
  <!-- inline object literal -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// when selected:
typeof vm.selected // => 'object'
vm.selected.number // => 123

Modifiers

.lazy

通常 v-model 會在 input event 中同步輸入框的值與 data，但你可以加上 .lazy modifier 來轉而在 change event 中同步。

<!-- synced after "change" instead of "input" -->
<input v-model.lazy="msg">

.number

如果想自動將使用者的輸入值轉為數字，可以加上 .number modifier。

<input v-model.number="age" type="number">

.trim

如果想自動去除使用者輸入的前後空白，可以加上 .trim modifier。

<input v-model.trim="msg">

v-model with Components

HTML 內建的 input types 不總是會符合我們的需求，這時候可以自定義的 input 來取代，並且也可以使用 v-model 來綁定 data。

Reference

• https://v2.vuejs.org/v2/guide/forms.html